import React, { Component } from 'react'
import { Button } from 'antd'
import { PlusOutlined, MinusOutlined } from '@ant-design/icons'
import { Select } from 'antd';
import './index.css';
const { Option } = Select;

export default class Calculator extends Component {
  state = {
    number: 1
  }

  // 下拉选择回调
  handleChange = (value) => {
    this.setState({
      number: parseInt(value)
    })
  }

  // 加
  increment = () => {
    const { number } = this.state
    this.props.increment(number)
  }

  // 奇数加
  oddIncrement = () => {
    const { number } = this.state
    if (this.props.count % 2 !== 0) {
      this.props.increment(number)
    }
  }

  // 异步加
  asyncIncrement = () => {
    const { number } = this.state
    this.props.asyncIncrement(number*1, 500)
  }

  // 减
  decrement = () => {
    const { number } = this.state
    this.props.decrement(number*1)
  }

  render() {
    return (
      <div className="box">
        <div className="result">计算结果：{this.props.count}</div>
        <div className="oprate">
        <Select defaultValue="1" style={{ width: 120 }} onChange={this.handleChange}>
          <Option value="1">step 1</Option>
          <Option value="2">step 2</Option>
          <Option value="3">step 3</Option>
        </Select>
        <Button type="primary" icon={<PlusOutlined />} onClick={this.increment}></Button>
        <Button type="primary" icon={<MinusOutlined />} onClick={this.decrement}></Button>
        <Button type="primary" onClick={this.oddIncrement}>奇数加</Button>
        <Button type="primary" onClick={this.asyncIncrement}>异步加</Button>
        </div>
      </div>
    )
  }
}
